<template>
  <div
    id="playlists"
    v-loading="isLoading"
    element-loading-background="#fafafa">
    <playlists-topic
      :hotTags="hotTags"
      @tagClick="handleTagClick"/>
    <!-- <song-lists
      :songLists="songLists"
      :isLoading="isLoading"
      @imgLoad="imgLoad"/> -->
    <brief-playlists
      :playlists="playlists"
      @imgLoad="imgLoad"
      :class="{ hidden: isLoading }"/>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="queryInfo.pagesize"
      @current-change="changePage"
      :class="{ hidden: isLoading }">
    </el-pagination>
  </div>
</template>

<script>
import PlaylistsTopic from './childrenCpns/PlaylistsTopic'
// import SongLists from 'components/content/songlists/SongLists.vue'
import BriefPlaylists from 'components/content/briefplaylists/BriefPlaylists.vue'
// import { debounce } from 'utils'

export default {
  name: 'Playlistys',
  data () {
    return {
      hotTags: null,
      playlists: null,
      isLoading: false,
      queryInfo: {
        pagesize: 50,
        pagenum: 1
      },
      total: 0
    }
  },
  components: {
    PlaylistsTopic,
    // SongLists,
    BriefPlaylists
  },
  created () {
    this._getHotTopic()
    this._getPlaylists()
  },
  methods: {
    // 1. 获取热门标签
    async _getHotTopic () {
      const result = await this.$http.get('/playlist/hot')
      if (result.status !== 200 || result.data.code !== 200) {
        return this.$message.info('获取热门标签失败')
      }
      // console.log(result.data)
      this.hotTags = result.data.tags
    },
    // 2. 获取歌单列表
    async _getPlaylists (cat = '华语') {
      new Promise((resolve) => {
        this.isLoading = true
        this.playlists = null
        this.scrollTo(0)
        this.scrollUpdate()
        this.scrollUpdate()
        setTimeout(() => {
          resolve()
        }, 0)
      }).then(async () => {
        const result = await this.$http.get('/top/playlist', {
          params: {
            limit: this.queryInfo.pagesize,
            offset: (this.queryInfo.pagenum - 1) * 50,
            cat: cat
          }
        })
        if (result.status !== 200 || result.data.code !== 200) {
          return this.$message.info('获取歌单列表失败')
        }
        this.total = result.data.total
        this.playlists = result.data.playlists
      })
    },
    // 3. 处理标签点击
    handleTagClick (cat) {
      console.log(cat)
      this._getPlaylists(cat)
    },
    // 4.关闭loading窗口
    imgLoad () {
      this.isLoading = false
      this.scrollUpdate()
      // console.log(this.isLoading)
    },
    // 5. aaa
    changePage (pagenum) {
      this.queryInfo.pagenum = pagenum
      this._getPlaylists()
    },
    // 6. 滚动滚动条
    scrollTo (top) {
      this.$emit('scrollTo', top)
    },
    // 7. 刷新滚动
    scrollUpdate () {
      this.$emit('scrollUpdate')
    }
    // 9. 获取防抖函数
  }
}
</script>

<style scoped lang="less">
#playlists {
  user-select: none;
  position: relative;
  // width: 100%;
  height: 100%;
  // padding: 20px 40px 0 40px;
  .el-pagination {
    background-color: #fafafa;
  }
}
</style>

<style lang="less">
#playlists {
  .el-loading-mask {
    position: absolute;
    width: 100%;
    height: calc(100% - 20px);
    top: 20px;
    bottom: 0;
  }
  .el-pagination {
    background-color: #fafafa;
    position: absolute;
    left: 50%;
    margin-bottom: 30px;
    transform: translateX(-50%);
    button, ul, li {
      background-color: #fafafa;
    }
  }
}
</style>
